import { CityBuildingLayer, LineLayer, LayerSwitch } from "@antv/l7"
import api from "../axios/smart_city.js"

export const useLayer = async (scene,map) => {
  let buidings = api.getBuildings()
  const buildingLayer = new CityBuildingLayer({ name:"城市建筑"})
    .source(buidings)
    .size("Elevation",(h)=> h)
    .filter("Elevation",(d)=>d >40)
    .color("Color",(c)=>"rgb("+ c+",0,0)")
    .animate(true)
    .active({
      color: "#0ff",
      mix: 0.5,
    })
    .style({
      bacseColor:"rgb(16,16,16)",
      windowColor:"rgb(30,60,90)",
      brightcolor:"rgb(255,176,38)",
      sweep: {
        enable: true,
        sweepRadius: 2,
        sweepCenter: [114.3,30.5],
        sweepColor:"#1990FF",
        sweepspeed: 0.5,
      }
    })
  let roads = api.getRoads()
  const roadsLayer = new LineLayer({ name:"道路"})
   .source(roads)
   .size(1)
   .color("type", ["blue", "red", "green", "yellow", "purple"])
   .style({
    opacity: 0.4,
   })
   .animate({
    duration: 2,
    interval: 1,
    trailLength: 2,
   })
  scene.addLayer(buildingLayer)
  scene.addLayer(roadsLayer)

  // const layerSwitcher = new LayerSwitch({
  //   position: "topright",
  //   layers: [buildingLayer, roadsLayer]
  // })
  // scene.addControl(layerSwitcher)
  
  return {
    buildingLayer,
    roadsLayer
  }
}